<!-- @format -->
<template>
  <div>
    <!-- 1. 
      前提：只有一个复选框，想知道复选框是否勾选
      (1). 准备布尔类型的数据，通过v-model绑定在复选框上
      (2). 此时布尔值关联的是复选框的原生checked属性
     -->
    <input
      type="checkbox"
      v-model="flag" />是否同意用户协议
    <hr />

    <!-- 2. 
      前提：有多个复选框，想知道哪些复选框是否勾选
      (1). 准备数组类型的数据，通过v-model分别绑定在复选框上
      (2). 手动给每个复选框添加value属性(因为复选框原生没有value)
    -->
    选择喜欢的爱好:<br />
    <input
      type="checkbox"
      v-model="arr"
      value="smoking" />抽烟
    <input
      type="checkbox"
      v-model="arr"
      value="drinking" />喝酒
    <input
      type="checkbox"
      v-model="arr"
      value="hairing" />烫头
  </div>
</template>

<script>
  export default {
    data() {
      return {
        flag: false, // 布尔值
        arr: ['hairing', 'drinking'] // 数组
      }
    }
  }
</script>

<style></style>
